import React, { useRef, useState } from 'react';
import { connect, history } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { Table, Popover, Button } from 'antd'
import PopImgShow from '@/components/PopImgShow';
import RoleSetForm from './components/Form';
import Detail from './components/details';
import Indentation from '@/components/Indentation';
import RenderShopCard from './components/RenderShopCard';
const PlanList = (props) => {
  const { loading, dispatch, list } = props;
  const childRef = useRef();
  const [visible, setVisible] = useState(false);
  const [visible1, setVisible1] = useState(false);

  // 搜索参数
  const searchItems = [
    {
      label: '模板名称',
      name: 'keyword',
    },
  ];
  const expandedRowRender = (e) => {
    const { cityContent, expressPriceType } = e
    const list = JSON.parse(cityContent)
    const columnsItems = [
      {
        title: '可配送区域',
        dataIndex: 'city',
        width: 600,
        style: {
          textAlign: 'center'
        },
        render: (e, record) => {
          return <Indentation width={600} str={e}></Indentation>
        }
      },
      {
        title: expressPriceType === 'piece' ? '首件（个）' : "首重(kg)",
        dataIndex: 'firstValue',
      },
      {
        title: '运费',
        dataIndex: 'firstPrice',
      },
      {
        title: expressPriceType === 'piece' ? '续件（个）' : "续重(kg)",
        dataIndex: 'nextValue',
      },
      {
        title: '续费',
        dataIndex: 'nextPrice',
      },
    ]

    return <TableDataBlock columns={columnsItems} list={list} pagination={false} />;
  };
  // table 表头
  const getColumns = [
    {
      title: '模板名称',
      dataIndex: 'templateName',
    },
    {
      title: '绑定商品',
      dataIndex: 'goodsAmount',
      render: (e, record) => {
        return e ? (
          <Popover
            placement="bottom"
            content={<RenderShopCard list={record.goodsList}></RenderShopCard>}
          >
            {' '}
            <Button type="link">{e}</Button>
          </Popover>
        ) : (
          '--'
        );
      },
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [

        {
          auth: true,
          type: 'edit',
          click: () => {
            history.push({
              pathname: '/systemModule/logisticsDetail',
              query: {
                type: 'edit',
                detail: JSON.stringify(record)
              }
            })
          },
        },
        {
          auth: true,
          type: 'del',
          disabled: record.templateSource === 'system',
          click: () => {
            dispatch({
              type: 'expressTemplate/fakeDeleteExpressTemplate',
              payload: {
                id: val,
              },
              callback: (e) => {
                handleCallback()
              },
            });
          },
        },
      ],
    },
  ];
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const handleSaveRole = (detail = {}) => {
    history.push({
      pathname: '/systemModule/logisticsDetail',
      query: {
        type: 'add'
      }
    })
  };
  const extraBtn = [
    {
      text: '新建运费模板',
      onClick: () => {
        handleSaveRole();
      },
    },
  ];

  return (
    <>
      <TableDataBlock
        btnExtra={extraBtn}
        cRef={childRef}
        loading={loading}
        searchItems={searchItems}
        columns={getColumns}
        expandable={{
          expandedRowRender,
          expandedRowKeys: list.list.map(val => {
            const { id } = val
            return id.toString()
          })
        }}
        rowKey={(record) => `${record.id}`}
        dispatchType="expressTemplate/fetchListExpressTemplate"
        {...list}
      ></TableDataBlock>
      {/* <RoleSetForm
        childRef={childRef}
        visible={visible}
        onClose={() => setVisible(false)}
        handleCallback={handleCallback}
      ></RoleSetForm>
      <Detail
        visible={visible1}
        onClose={() => setVisible1(false)}
        handleCallback={handleCallback}
      ></Detail> */}
    </>
  );
};

export default connect(({ expressTemplate, loading }) => ({
  list: expressTemplate.list,
  loading: loading.models.expressTemplate,
}))(PlanList);
